<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/css/bootstrap.min.css"/>
</head>
<body>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">增加角色权限</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">角色名:</label>
            <input type="text" class="form-control" id="rolename_add" disabled>
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">权限选择:</label>
            <select class="form-control" id="permission_add">
            <c:forEach var="permission" items="${permissionList }">
            <option value="${permission.id }">${permission.description }</option>
            </c:forEach>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="addPermission">添加</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">删除角色权限</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">角色名:</label>
            <input type="text" class="form-control" id="rolename_delete" disabled>
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">权限选择:</label>
            <select class="form-control" id="permission_delete">
            <c:forEach var="permission" items="${permissionList }">
            <option value="${permission.id }">${permission.description }</option>
            </c:forEach>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="deletePermission">删除</button>
      </div>
    </div>
  </div>
</div>

<h4>角色管理</h4>
<table class="table table-condensed">
   <thead>
      <tr>
         <th>角色名称</th>
         <th>角色描述</th>
         <th>角色权限</th>
         <th>权限管理</th>
      </tr>
   </thead>
   <tbody>
	<c:forEach var="role" items="${roleList}">
	  <tr>
         <td>${role.role }</td>
         <td>${role.description }</td>
         <td><c:forEach var="permission" items="${role.permissions }">
         ${permission}&nbsp
         </c:forEach></td>
         <td><button type="button" class="btn btn-primary btn-xs" data-toggle="modal" 
         data-target="#addModal" data-role="${role.role }">增加权限</button>
         
		 &nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-primary btn-xs" 
		 data-toggle="modal" data-target="#deleteModal" data-role="${role.role }">删除权限</button>
		 </td>
      </tr>
	</c:forEach>
      
   </tbody>
</table>
</body>
<script src="${pageContext.request.contextPath }/static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/static/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#addModal').on('show.bs.modal', function (event) {
	  var button = $(event.relatedTarget) // Button that triggered the modal
	  var role = button.data('role') // Extract info from data-* attributes
	  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
	  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
	  var modal = $(this)
	  modal.find('.modal-body input').val(role)
	})
$("#addPermission").click(function(){
	var role = $("#rolename_add").val();
	var permission = $("#permission_add").val();
	$.post("addPermission",
			{role:role,
			 permission:permission
			},
			function(data){
				alert(data.message)
			},
			"json");
});

$('#deleteModal').on('show.bs.modal', function (event) {
	  var button = $(event.relatedTarget) // Button that triggered the modal
	  var role = button.data('role') // Extract info from data-* attributes
	  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
	  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
	  var modal = $(this)
	  modal.find('.modal-body input').val(role)
	})
$("#deletePermission").click(function(){
	var role = $("#rolename_delete").val();
	var permission = $("#permission_delete").val();
	$.post("deletePermission",
			{role:role,
			 permission:permission
			},
			function(data){
				alert(data.message)
			},
			"json");
});
</script>
</html>